<template>
  <div class="uwb">
    <div class="home-team-speed">
      <div class="data-title">
        <div class="speed-title">
          <div>球员</div>
          <div>速度</div>
        </div>
        <div class="distance-title">
          <div>底速跑</div>
          <div>慢速跑</div>
          <div>中速跑</div>
          <div>快速跑</div>
          <div>高速跑</div>
          <div>冲刺跑</div>
          <div>总跑动</div>
        </div>
      </div>
      <div class="data-number">
        <div class="data-speed">
          <div v-for="(player, index) in speedData[0]" :key="index">
            <!--            <transition-group   name="list-complete" tag="div">-->
            <!--              <span v-for="(value,name) in player"-->
            <!--                       :key="value"-->
            <!--                       class="list-complete-item">-->
            <!--                {{ value }}-->
            <!--              </span>-->
            <!--            </transition-group>-->
            <span
              v-for="(value, name) in player"
              :key="name"
              class="list-complete-item"
            >
              {{ value }}
            </span>
          </div>
        </div>
        <div class="data-distance">
          <div v-for="(player, index) in distanceData[0]" :key="'a' + index">
            <transition-group
              class="distance-transition-group"
              name="list-complete"
              tag="div"
            >
              <span
                v-for="(value, name, index) in player"
                :key="index"
                class="list-complete-item"
              >
                {{ value }}
              </span>
            </transition-group>
          </div>
        </div>
      </div>
    </div>
    <div class="timer">
      <Timer @matchBegin="matchBegin" />
    </div>
    <div class="away-team-speed">
      <!--      <el-button @click="add">增加</el-button>-->
      <!--      <el-button @click="change">改变</el-button>-->
      <el-button @click="speedStart">开始</el-button>
      <el-button @click="speedStop">停止</el-button>
    </div>
    <div class="playground">
      <UwbPlayground />
    </div>
    <div class="rate-prediction">
      <!--      <Area/>-->
      <TestArea />
    </div>
  </div>
</template>

<script>
import axios from "axios";
import Area from "../components/ant_v/RatePrediction/Area";
import UwbPlayground from "../components/playground/UwbPlayground";
import Timer from "../components/uwb/Timer";
import TestArea from "../components/uwb/TestArea";
export default {
  name: "Uwb",
  components: {
    Area,
    UwbPlayground,
    Timer,
    TestArea,
  },
  data() {
    return {
      speedTitle: [
        "球员",
        "速度",
        "低速跑",
        "慢速跑",
        "中速跑",
        "快速跑",
        "高速跑",
        "冲刺跑",
        "总跑动",
      ],
      speeds: [1, 2, 3, 4, 5, 6, 7, 8, 9],
      nextNum: 10,
      speedData: [
        [
          {
            playerNum: 1,
            speed: 0,
          },
          {
            playerNum: 10,
            speed: 0,
          },
          {
            playerNum: 11,
            speed: 0,
          },
          {
            playerNum: 2,
            speed: 0,
          },
          {
            playerNum: 3,
            speed: 0,
          },
          {
            playerNum: 4,
            speed: 0,
          },
          {
            playerNum: 5,
            speed: 0,
          },
          {
            playerNum: 6,
            speed: 0,
          },
          {
            playerNum: 7,
            speed: 0,
          },
          {
            playerNum: 8,
            speed: 0,
          },
          {
            playerNum: 9,
            speed: 0,
          },
        ],
        [
          {
            playerNum: 15,
            speed: 0,
          },
          {
            playerNum: 16,
            speed: 0,
          },
          {
            playerNum: 17,
            speed: 0,
          },
          {
            playerNum: 18,
            speed: 0,
          },
          {
            playerNum: 19,
            speed: 0,
          },
          {
            playerNum: 20,
            speed: 0,
          },
          {
            playerNum: 21,
            speed: 0,
          },
          {
            playerNum: 22,
            speed: 0,
          },
          {
            playerNum: 23,
            speed: 0,
          },
          {
            playerNum: 24,
            speed: 0,
          },
          {
            playerNum: 25,
            speed: 0,
          },
        ],
      ],
      distanceData: [
        [
          {
            LIR: 0,
            MIR: 0,
            HIR: 0,
            SPR: 0,
            HIA: 0,
            NS: 0,
            distance: 0,
          },
          {
            LIR: 0,
            MIR: 0,
            HIR: 0,
            SPR: 0,
            HIA: 0,
            NS: 0,
            distance: 0,
          },
          {
            LIR: 0,
            MIR: 0,
            HIR: 0,
            SPR: 0,
            HIA: 0,
            NS: 0,
            distance: 0,
          },
          {
            LIR: 0,
            MIR: 0,
            HIR: 0,
            SPR: 0,
            HIA: 0,
            NS: 0,
            distance: 0,
          },
          {
            LIR: 0,
            MIR: 0,
            HIR: 0,
            SPR: 0,
            HIA: 0,
            NS: 0,
            distance: 0,
          },
          {
            LIR: 0,
            MIR: 0,
            HIR: 0,
            SPR: 0,
            HIA: 0,
            NS: 0,
            distance: 0,
          },
          {
            LIR: 0,
            MIR: 0,
            HIR: 0,
            SPR: 0,
            HIA: 0,
            NS: 0,
            distance: 0,
          },
          {
            LIR: 0,
            MIR: 0,
            HIR: 0,
            SPR: 0,
            HIA: 0,
            NS: 0,
            distance: 0,
          },
          {
            LIR: 0,
            MIR: 0,
            HIR: 0,
            SPR: 0,
            HIA: 0,
            NS: 0,
            distance: 0,
          },
          {
            LIR: 0,
            MIR: 0,
            HIR: 0,
            SPR: 0,
            HIA: 0,
            NS: 0,
            distance: 0,
          },
          {
            LIR: 0,
            MIR: 0,
            HIR: 0,
            SPR: 0,
            HIA: 0,
            NS: 0,
            distance: 0,
          },
        ],
        [
          {
            LIR: 0,
            MIR: 0,
            HIR: 0,
            SPR: 0,
            HIA: 0,
            NS: 0,
            distance: 0,
          },
          {
            LIR: 0,
            MIR: 0,
            HIR: 0,
            SPR: 0,
            HIA: 0,
            NS: 0,
            distance: 0,
          },
          {
            LIR: 0,
            MIR: 0,
            HIR: 0,
            SPR: 0,
            HIA: 0,
            NS: 0,
            distance: 0,
          },
          {
            LIR: 0,
            MIR: 0,
            HIR: 0,
            SPR: 0,
            HIA: 0,
            NS: 0,
            distance: 0,
          },
          {
            LIR: 0,
            MIR: 0,
            HIR: 0,
            SPR: 0,
            HIA: 0,
            NS: 0,
            distance: 0,
          },
          {
            LIR: 0,
            MIR: 0,
            HIR: 0,
            SPR: 0,
            HIA: 0,
            NS: 0,
            distance: 0,
          },
          {
            LIR: 0,
            MIR: 0,
            HIR: 0,
            SPR: 0,
            HIA: 0,
            NS: 0,
            distance: 0,
          },
          {
            LIR: 0,
            MIR: 0,
            HIR: 0,
            SPR: 0,
            HIA: 0,
            NS: 0,
            distance: 0,
          },
          {
            LIR: 0,
            MIR: 0,
            HIR: 0,
            SPR: 0,
            HIA: 0,
            NS: 0,
            distance: 0,
          },
          {
            LIR: 0,
            MIR: 0,
            HIR: 0,
            SPR: 0,
            HIA: 0,
            NS: 0,
            distance: 0,
          },
          {
            LIR: 0,
            MIR: 0,
            HIR: 0,
            SPR: 0,
            HIA: 0,
            NS: 0,
            distance: 0,
          },
        ],
      ],
      speedSecond: 1,
      distanceSecond: 4,
      speedTimer: null,
      distanceTimer: null,
    };
  },
  methods: {
    // randomNum(minNum,maxNum){
    //   switch(arguments.length){
    //     case 1:
    //       return parseInt(Math.random()*minNum+1,10);
    //       break;
    //     case 2:
    //       return (Math.random()*(maxNum-minNum+1)+minNum).toFixed(1);
    //       break;
    //     default:
    //       return 0;
    //       break;
    //   }
    // },
    // randomIndex() {
    //   return Math.floor(Math.random() * this.distanceData.length)
    // },
    // add() {
    //   this.speeds.splice(this.randomIndex(), 1, this.nextNum++)
    // },

    // change(){
    //  /* 由于 JavaScript 的限制，Vue 不能检测以下变动的数组：
    //   当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue
    //   当你修改数组的长度时，例如：vm.items.length = newLength*/
    //   // this.speeds[this.randomIndex()] = this.nextNum++
    //   // this.$set(this.speeds, this.randomIndex(), this.nextNum++)
    //   // let arr =  [];
    //   // for(let i = 0;i<8;i++){
    //   //   arr.push(this.randomIndex().toString())
    //   // }
    //   let speedData = [
    //     {playerNum:1,speed:this.randomNum(0,10)},
    //     {playerNum:2,speed:this.randomNum(0,10)},
    //     {playerNum:3,speed:this.randomNum(0,10)},
    //     {playerNum:4,speed:this.randomNum(0,10)},
    //     {playerNum:5,speed:this.randomNum(0,10)},
    //     {playerNum:6,speed:this.randomNum(0,10)},
    //     {playerNum:7,speed:this.randomNum(0,10)},
    //     {playerNum:8,speed:this.randomNum(0,10)},
    //     {playerNum:9,speed:this.randomNum(0,10)},
    //     {playerNum:10,speed:this.randomNum(0,10)},
    //     {playerNum:11,speed:this.randomNum(0,10)},
    //     {playerNum:12,speed:this.randomNum(0,10)},
    //     {playerNum:13,speed:this.randomNum(0,10)},
    //   ];
    //   let distanceData = [
    //     {LIR:this.randomNum(11,20),MIR:this.randomNum(21,30),HIR:this.randomNum(31,40),SPR:this.randomNum(41,50),HIA:this.randomNum(51,60),NS:this.randomNum(61,70),distance:this.randomNum(10,20)},
    //     {LIR:this.randomNum(11,20),MIR:this.randomNum(21,30),HIR:this.randomNum(31,40),SPR:this.randomNum(41,50),HIA:this.randomNum(51,60),NS:this.randomNum(61,70),distance:this.randomNum(10,20)},
    //     {LIR:this.randomNum(11,20),MIR:this.randomNum(21,30),HIR:this.randomNum(31,40),SPR:this.randomNum(41,50),HIA:this.randomNum(51,60),NS:this.randomNum(61,70),distance:this.randomNum(10,20)},
    //     {LIR:this.randomNum(11,20),MIR:this.randomNum(21,30),HIR:this.randomNum(31,40),SPR:this.randomNum(41,50),HIA:this.randomNum(51,60),NS:this.randomNum(61,70),distance:this.randomNum(10,20)},
    //     {LIR:this.randomNum(11,20),MIR:this.randomNum(21,30),HIR:this.randomNum(31,40),SPR:this.randomNum(41,50),HIA:this.randomNum(51,60),NS:this.randomNum(61,70),distance:this.randomNum(10,20)},
    //     {LIR:this.randomNum(11,20),MIR:this.randomNum(21,30),HIR:this.randomNum(31,40),SPR:this.randomNum(41,50),HIA:this.randomNum(51,60),NS:this.randomNum(61,70),distance:this.randomNum(10,20)},
    //     {LIR:this.randomNum(11,20),MIR:this.randomNum(21,30),HIR:this.randomNum(31,40),SPR:this.randomNum(41,50),HIA:this.randomNum(51,60),NS:this.randomNum(61,70),distance:this.randomNum(10,20)},
    //     {LIR:this.randomNum(11,20),MIR:this.randomNum(21,30),HIR:this.randomNum(31,40),SPR:this.randomNum(41,50),HIA:this.randomNum(51,60),NS:this.randomNum(61,70),distance:this.randomNum(10,20)},
    //     {LIR:this.randomNum(11,20),MIR:this.randomNum(21,30),HIR:this.randomNum(31,40),SPR:this.randomNum(41,50),HIA:this.randomNum(51,60),NS:this.randomNum(61,70),distance:this.randomNum(10,20)},
    //     {LIR:this.randomNum(11,20),MIR:this.randomNum(21,30),HIR:this.randomNum(31,40),SPR:this.randomNum(41,50),HIA:this.randomNum(51,60),NS:this.randomNum(61,70),distance:this.randomNum(10,20)},
    //     {LIR:this.randomNum(11,20),MIR:this.randomNum(21,30),HIR:this.randomNum(31,40),SPR:this.randomNum(41,50),HIA:this.randomNum(51,60),NS:this.randomNum(61,70),distance:this.randomNum(10,20)},
    //     {LIR:this.randomNum(11,20),MIR:this.randomNum(21,30),HIR:this.randomNum(31,40),SPR:this.randomNum(41,50),HIA:this.randomNum(51,60),NS:this.randomNum(61,70),distance:this.randomNum(10,20)},
    //     {LIR:this.randomNum(11,20),MIR:this.randomNum(21,30),HIR:this.randomNum(31,40),SPR:this.randomNum(41,50),HIA:this.randomNum(51,60),NS:this.randomNum(61,70),distance:this.randomNum(10,20)},
    //   ];
    //
    //   // this.$set(this.speedData[this.randomIndex()],'speed', this.randomNum(0,10));
    //   // this.$set(this.speedData[this.randomIndex()],'speed', this.randomNum(0,10));
    //   for(let i = 0;i < this.speedData[0].length;i++){
    //     this.$set(this.speedData[0][i],'speed', this.randomNum(0,10));
    //     // this.$set(this.distanceData,i, distanceData[i])
    //   }
    // },

    speedStart() {
      //速度数据的定时器 1s一次
      this.speedTimer = setInterval(() => {
        // this.$set(this.speeds, this.randomIndex(), this.randomNum(11,80));
        // this.change()
        this.getSpeedData(this.speedSecond);
        this.speedSecond++;
      }, 1000);

      //距离数据的定时器 4s一次
      this.distanceTimer = setInterval(() => {
        this.getDistanceData(this.distanceSecond);
        this.distanceSecond = this.distanceSecond + 4;
      }, 4000);
    },
    speedStop() {
      clearInterval(this.speedTimer);
      clearInterval(this.distanceTimer);
      this.speedTimer = null;
      this.distanceTimer = null;
    },

    //获取速度数据
    async getSpeedData(seconds) {
      const { data } = await axios.get(
        `http://8.141.159.127:3000/api/v1/homephys/time/list/${seconds}`
      );
      this.speedData = data;
    },
    //获取距离数据
    async getDistanceData(seconds) {
      const { data } = await axios.get(
        `http://8.141.159.127:3000/api/v1/homephys/distance/list/${seconds}`
      );
      this.distanceData = data;
    },
    matchBegin() {
      console.log("matchBegin");
    },
  },

  beforeDestroy() {
    clearInterval(this.speedTimer);
    clearInterval(this.distanceTimer);
    this.speedTimer = null;
    this.distanceTimer = null;
  },
};
</script>

<style scoped lang="scss">
.uwb {
  position: relative;
  width: 1440px;
  height: 1000px;
  margin: auto;
  background-color: #edf1f2;
  .home-team-speed {
    position: absolute;
    left: 15px;
    top: 15px;
    width: 520px;
    height: 550px;
    /*background-color: red;*/
    .data-title {
      display: flex;
      justify-content: flex-start;
      width: 100%;
      height: 5%;
      /*background-color: #4EA3DD;*/
      .speed-title {
        width: 20%;
        height: 100%;
        display: flex;
        justify-content: space-between;
        /*background-color: black;*/
        div {
          width: 50px;
          height: 100%;
          line-height: 35px;
          /*background-color: aqua;*/
        }
      }
      .distance-title {
        width: 80%;
        height: 100%;
        display: flex;
        justify-content: space-around;
        /*background-color: hotpink;*/
        div {
          width: 53px;
          height: 100%;
          line-height: 35px;
          /*background-color: greenyellow;*/
        }
      }
    }
    .data-number {
      display: flex;
      justify-content: space-around;
      width: 100%;
      height: 95%;
      /*line-height: 41px;*/
      /*background-color: deeppink;*/
      .data-speed {
        width: 20%;
        height: 100%;
        /*background-color: darkcyan;*/
        display: flex;
        flex-direction: column;
        justify-content: space-around;
      }
      .data-distance {
        width: 80%;
        height: 100%;
        /*background-color: green;*/
        display: flex;
        flex-direction: column;
        justify-content: space-around;
      }
    }
  }
  .away-team-speed {
    position: absolute;
    right: 15px;
    top: 15px;
    width: 520px;
    height: 550px;
    /*background-color: red;*/
  }
  .timer {
    position: absolute;
    top: 15px;
    left: 550px;
    width: 340px;
    height: 250px;
    /*background-color: blue;*/
  }
  .speed-transition-group {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
  }
  .distance-transition-group {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    /*background-color: #bd2c00;*/
  }
  .playground {
    position: absolute;
    top: 60%;
    left: 15px;
    width: 591px;
    height: 383px;
    /*background-color: darkgreen;*/
  }
  .rate-prediction {
    position: absolute;
    top: 60%;
    right: 15px;
    width: 591px;
    height: 383px;
    /*background-color: chocolate;*/
  }
}

.list-complete-item {
  transition: all 2s;
  display: inline-block;
  /*margin-right: 10px;*/
  width: 50px;
  line-height: 28px;
  font-size: 20px;
  height: 100%;
  /*background-color: #1A936F;*/
}
.list-complete-enter, .list-complete-leave-to
   /* .list-complete-leave-active for below version 2.1.8 */ {
  opacity: 0;
  transform: translateY(20px);
}
.list-complete-leave-active {
  position: absolute;
}
</style>
